<div class="gf-form-group">
  <h3 class="page-heading">HTTP</h3>
  <div class="gf-form-group">
    <div class="gf-form-inline">
      <div class="gf-form max-width-30">
        <span class="gf-form-label width-7">URL</span>
        <input class="gf-form-input" type="text"
              ng-model='current.url' placeholder="{{suggestUrl}}"
              bs-typeahead="getSuggestUrls"  min-length="0"
              ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
        <info-popover mode="right-absolute">
          <p>指定完整的 HTTP URL（例如 http://your_server:8080）</p>
          <span ng-show="current.access === 'direct'">
            您的访问方法是 <em>浏览器</em>，这意味着需要从浏览器访问该 URL。
          </span>
          <span ng-show="current.access === 'proxy'">
            您的访问方法是 <em>服务器</em>，这意味着需要从 ATOPS 后端/服务器访问 URL。
          </span>
        </info-popover>
      </div>
    </div>

    <div class="gf-form-inline" ng-if="showAccessOption">
      <div class="gf-form max-width-30">
        <span class="gf-form-label width-7">访问</span>
        <div class="gf-form-select-wrapper max-width-24">
          <select class="gf-form-input" ng-model="current.access" ng-options="f.key as f.value for f in [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]"></select>
        </div>
      </div>
      <div class="gf-form">
        <label class="gf-form-label query-keyword pointer" ng-click="toggleAccessHelp()">
          帮助&nbsp;
          <i class="fa fa-caret-down" ng-show="ctrl.showAccessHelp"></i>
          <i class="fa fa-caret-right" ng-hide="ctrl.showAccessHelp">&nbsp;</i>
        </label>
      </div>
    </div>

    <div class="alert alert-info" ng-show="showAccessHelp">
      <div class="alert-body">
        <p>
          访问模式控制如何处理对数据源的请求。
          如果没有其他说明，<strong><i>服务器</i></strong>应该是首选方式。
        </p>
        <div class="alert-title">服务器访问模式（默认）：</div>
        <p>
          所有请求都会从浏览器发送到 ATOPS 后端/服务器，后者又将请求转发到数据源，并通过这种方式规避可能的跨域资源共享（CORS）要求。如果选择这种访问模式，URL 就要让 ATOPS 后端/服务器可以访问到。
        </p>
        <div class="alert-title">浏览器访问模式：</div>
        <p>
          所有请求都会从浏览器直接发送到数据源，并可能受到跨域资源共享（CORS）要求的约束。如果选择这种访问模式，URL 就要让浏览器可以访问到。
        </p>
      </div>
    </div>
  </div>

  <h3 class="page-heading">身份验证</h3>
  <div class="gf-form-group">
    <div class="gf-form-inline">
      <gf-form-switch class="gf-form" label="基本身份验证" checked="current.basicAuth" label-class="width-8" switch-class="max-width-6"></gf-form-switch>
      <gf-form-switch class="gf-form" label="带凭据" tooltip="是否应该使用跨站请求发送诸如 cookie 或 auth 消息头之类的凭据。" checked="current.withCredentials" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
    </div>
    <div class="gf-form-inline">
      <gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="TLS 客户身份验证" label-class="width-8" checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-switch>
      <gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="带 CA 凭据" tooltip="验证自签名 TLS 证书时需要" checked="current.jsonData.tlsAuthWithCACert" label-class="width-11" switch-class="max-width-6"></gf-form-switch>
    </div>
  </div>

  <div class="gf-form-inline">
    <gf-form-switch class="gf-form" ng-if="current.access=='proxy'" label="跳过 TLS 验证（不安全）" label-class="width-16" checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-switch>
  </div>
</div>

<div class="gf-form-group" ng-if="current.basicAuth">
  <h6>基本身份验证详情</h6>
  <div class="gf-form" ng-if="current.basicAuth">
    <span class="gf-form-label width-7">
      用户
    </span>
    <input class="gf-form-input max-width-21" type="text"  ng-model='current.basicAuthUser' placeholder="用户" required></input>
  </div>

  <div class="gf-form">
    <span class="gf-form-label width-7">
      密码
    </span>
    <input class="gf-form-input max-width-21" type="password" ng-model='current.basicAuthPassword' placeholder="密码" required></input>
  </div>
</div>

<div class="gf-form-group" ng-if="(current.jsonData.tlsAuth || current.jsonData.tlsAuthWithCACert) && current.access=='proxy'">
  <div class="gf-form">
    <h6>TLS 身份验证详情</h6>
    <info-popover mode="header">TLS 证书已被加密并存储在 ATOPS 数据库中。</info-popover>
  </div>
  <div ng-if="current.jsonData.tlsAuthWithCACert">
    <div class="gf-form-inline">
      <div class="gf-form gf-form--v-stretch">
        <label class="gf-form-label width-7">CA 证书</label>
      </div>
      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsCACert">
        <textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsCACert" placeholder="以 -----BEGIN CERTIFICATE----- 开始"></textarea>
      </div>

      <div class="gf-form" ng-if="current.secureJsonFields.tlsCACert">
        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsCACert = false">重置</a>
      </div>
    </div>
  </div>

  <div ng-if="current.jsonData.tlsAuth">
    <div class="gf-form-inline">
      <div class="gf-form gf-form--v-stretch">
        <label class="gf-form-label width-7">客户证书</label>
      </div>
      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientCert">
        <textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientCert" placeholder="以 -----BEGIN CERTIFICATE----- 开始" required></textarea>
      </div>
      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientCert">
        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientCert = false">重置</a>
      </div>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form gf-form--v-stretch">
        <label class="gf-form-label width-7">客户密钥</label>
      </div>
      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientKey">
        <textarea rows="7" class="gf-form-input gf-form-textarea" ng-model="current.secureJsonData.tlsClientKey" placeholder="以 -----BEGIN RSA PRIVATE KEY----- 开始" required></textarea>
      </div>
      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientKey">
        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured">
        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientKey = false">重置</a>
      </div>
    </div>
  </div>
</div>

<h3 class="page-heading" ng-if="current.access=='proxy'">高级 HTTP 设置</h3>
<div class="gf-form-group" ng-if="current.access=='proxy'">
  <div class="gf-form-inline">
    <div class="gf-form">
      <span class="gf-form-label width-10">白名单 Cookies</span>
      <bootstrap-tagsinput ng-model="current.jsonData.keepCookies" tagclass="label label-tag" placeholder="添加名称">
      </bootstrap-tagsinput>
      <info-popover mode="right-absolute">
        ATOPS Proxy 默认删除转发的 cookies。请按名称指定应该转发到数据源的 cookies。
      </info-popover>
    </div>
  </div>
</div>
